<template>
	<view class="theme-container">
		<view :style="{height: sConf.tH+'px'}"></view>

		<view v-if="status === 0" class="" style="padding: 10px;display: flex;flex-direction: column;gap: 10px;">
			<view class="" style="width: 100%;display: flex;justify-content: center;">
				<text style="font-weight: bold;font-size: large;color: #fff;">验证身份</text>
			</view>
			<tn-input v-model="valiPhone" type="number" right-icon="phone" placeholder="原手机号码" disabled></tn-input>
			<view style="display: flex;align-items: center;">
				<tn-input v-model="captcha" type="text" right-icon="image" placeholder="图片验证码"
					style="color: #f1f1f1;"></tn-input>
				<image :src="sConf.host + captchaUrl" @click="refreshCaptcha" class="captcha-img" mode="aspectFit" />
				<button size="mini" :disabled="out > 0" style="padding: 3px 10px;" @click="sendChange">发送短信</button>
			</view>
			<tn-input v-model="smsCode" type="text" right-icon="email" placeholder="短信验证码"
				style="color: #f1f1f1;"></tn-input>
			<label v-if="out > 0" for="">没收到短信? <text
					style="padding: 0 5px;font-weight: bold;color: #dd524d;">{{out}}</text> 秒后 <text
					style="color: #007aff;" @click="refreshCaptcha">重试</text></label>

			<view class="" style="width: 100%;padding-top: 30px;">
				<button type="primary" @click="valiSubmit">短信验证身份</button>
			</view>
		</view>
		<view v-if="status === 1" class="" style="padding: 10px;display: flex;flex-direction: column;gap: 10px; ">
			<view class="" style="width: 100%;display: flex;justify-content: center;">
				<text style="font-weight: bold;font-size: large;color: #fff;">绑定手机</text>
			</view>
			<tn-input v-model="bindPhone" type="number" right-icon="phone" placeholder="新手机号码"></tn-input>
			<view style="display: flex;align-items: center;">
				<tn-input v-model="captcha" type="text" right-icon="image" placeholder="图片验证码"
					style="color: #f1f1f1;"></tn-input>
				<image :src="sConf.host + captchaUrl" @click="refreshCaptcha" class="captcha-img" mode="aspectFit" />
				<button size="mini" :disabled="out > 0" style="padding: 3px 10px;" @click="sendChange">发送短信</button>
			</view>
			<tn-input v-model="smsCode" type="text" right-icon="email" placeholder="短信验证码"
				style="color: #f1f1f1;"></tn-input>
			<label v-if="out > 0" for="">没收到短信? <text
					style="padding: 0 5px;font-weight: bold;color: #dd524d;">{{out}}</text> 秒后 <text
					style="color: #007aff;" @click="refreshCaptcha">重试</text></label>

			<view class="" style="width: 100%;padding-top: 30px;">
				<button type="primary" @click="bindSubmit">绑定手机</button>
			</view>
		</view>

		<!-- 顶部自定义导航 -->
		<tn-navbar :placeholder="true" fixed bg-color="#FFFFFF00" text-color="#fff">
			{{title}}
		</tn-navbar>
	</view>
</template>

<script>
	import utils from '@/common/utils';
	export default {
		data() {
			return {
				title: '绑定手机',
				sConf: getApp().globalData,
				status: 0,
				captchaUrl: '/api/hascode/1234',
				recode: null, // 图片序列号
				captcha: null, // 图片验证码
				idx: null, // 短信序列号		
				smsCode: null, // 短信验证码 						
				out: 0,
				valiPhone: null, // 旧手机				
				bindPhone: null, // 新手机
			}
		},
		onLoad(args) {
			let state = Number(args.state) || 0;
			let phone = String(args.phone) || null;
			this.status = state
			this.valiPhone = phone

			this.refreshCaptcha()
		},
		methods: {
			waitTimeout() {
				let that = this
				let timer = setInterval(() => {
					if (that.out > 0) {
						that.out--
					} else {
						console.log('over');
						clearInterval(timer)
					}
				}, 1000)
			},
			// 生成请求码
			generateNumCode() {
				return Math.floor(1000 + Math.random() * 9000); // 生成1000-9999之间的随机数
			},
			// 刷新验证码
			refreshCaptcha() {
				if (this.out > 0) {
					uni.showToast({
						title: '请稍后再试'
					})
					return
				}
				let recode = this.generateNumCode()
				this.captchaUrl = '/api/hascode/' + recode
				this.recode = recode
				this.captcha = null
				this.smsCode = null
			},
			/**
			 * 发送短信
			 */
			sendChange() {
				if (this.out > 0) {
					uni.showToast({
						title: '请稍后再试'
					})
					return
				}
				if (!this.valiPhone) {
					uni.showToast({
						title: '请输入手机号'
					})
					return
				}
				if (!this.captcha) {
					uni.showToast({
						title: '请输入验证码'
					})
					return
				}
				if (this.valiPhone === this.bindPhone) {
					uni.showToast({
						title: '手机号重复'
					})
					return
				}
				let host = this.sConf.host + '/api/getSms/'
				let token = this.sConf.token || ''
				let data = {
					phone: this.valiPhone,
					captcha: this.captcha,
					recode: this.recode,
					grant_type: 'user'
				}
				console.log('请求对象', data);
				utils.authenticatorOnPost(host, token, data).then(res => {
					console.log('请求短信', res);
					this.idx = res
					this.out = 60
					this.waitTimeout()
				}).catch(err => {
					console.log('请求短信失败', err);
					uni.showToast({
						title: '请求短信失败'
					})
				})
			},
			/**
			 * 验证身份
			 */
			valiSubmit() {
				if (!this.smsCode) {
					uni.showToast({
						title: '请输入短信验证码'
					})
					return
				}
				let host = this.sConf.host + '/api/putSms/';
				let token = this.sConf.token || ''
				let data = {
					phone: this.valiPhone,
					recode: this.idx, // 序列号		
					captcha: this.smsCode,
					grant_type: 'valiPhone'
				}
				console.log('验证数据包', data);
				utils.authenticatorOnPost(host, token, data).then(res => {
					console.log('短信验证', res);
					this.out = 0
					this.status = 1
					this.$nextTick(() => {
						this.refreshCaptcha()
					})
				}).catch(err => {
					console.log('短信身份验证失败', err);
					uni.showToast({
						title: '短信身份验证失败'
					})
				})
			},
			/**
			 * 绑定手机
			 */
			bindSubmit() {
				if (!this.bindPhone) {
					uni.showToast({
						title: '请输入新手机号'
					})
					return
				}
				if (!this.smsCode) {
					uni.showToast({
						title: '请输入短信验证码'
					})
					return
				}
				let host = this.sConf.host + '/api/bindSms/';
				let token = this.sConf.token || ''
				let data = {
					phone: this.bindPhone,
					recode: this.idx, // 序列号		
					captcha: this.smsCode,
					grant_type: 'bindPhone'
				}
				console.log('验证数据包', data);
				utils.authenticatorOnPost(host, token, data).then(res => {
					console.log('短信验证', res);
					uni.redirectTo({
						url: '/pages/index/index'
					})
				}).catch(err => {
					console.log('短信身份验证失败', err);
					uni.showToast({
						title: '短信身份验证失败'
					})
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.captcha-img {
		border-radius: 10px;
		margin-left: 10px;
		width: 100px;
		height: 35px;
	}
</style>